<template>
  <div class="app-container">

    <el-card style="margin-top: 20px">

      <div class="qu-content">
        <p>【{{ quData.type | quTypeFilter() }}】{{ quData.content }}</p>
        <div v-if="quData.remark!=''&&quData.remark!=null" class="qu-remark">
          {{ quData.remark }}}
        </div>
        <div v-if="quData.coding!=''&&quData.coding!=null" class="qu-coding">
          <codemirror :value="quData.coding" :options="codingOptions" />
        </div>
        <div v-if="quData.type === 1">
          <el-radio-group v-model="radioValues" readonly>
            <el-radio v-for="an in quData.answerList" :label="an.id" readonly>{{ an.content }}</el-radio>
          </el-radio-group>
        </div>

        <!-- 多选题 -->
        <div v-if="quData.type === 2">
          <el-checkbox-group v-model="multiValues" readonly>
            <el-checkbox v-for="an in quData.answerList" :label="an.id">{{ an.content }}</el-checkbox>
          </el-checkbox-group>
        </div>

        <!-- 判断题 -->
        <div v-if="quData.type === 3">
          <el-checkbox-group v-model="multiValues" readonly>
            <el-checkbox v-for="an in quData.answerList" :label="an.id">{{ an.content }}</el-checkbox>
          </el-checkbox-group>
        </div>

      </div>

    </el-card>

    <el-card class="qu-analysis" style="margin-top: 20px">
      整题解析：
      <p>{{ quData.analysis }}</p>
      <p v-if="!quData.analysis">暂无解析内容！</p>
    </el-card>

    <el-card class="qu-analysis" style="margin-top: 20px; margin-bottom: 30px">
      答案解析：
      <div v-for="an in quData.answerList" class="qu-analysis-line">
        <p style="color: #555;font-weight: bold">{{ an.content }}</p>
        <p style="color: #1890ff;">{{ an.analysis }}</p>
      </div>

    </el-card>

    <el-button type="info" @click="onCancel">返回</el-button>

  </div>
</template>

<script>
import { fetchDetail } from '@/api/qu/qu'
import 'codemirror/theme/darcula.css'
import 'codemirror/mode/clike/clike'
export default {
  name: 'QuView',
  data() {
    return {

      quData: {

      },

      radioValues: '',
      multiValues: [],
      analysisCount: 0,
      qaOptions: {
        mode: 'text/x-java',
        lineNumbers: true,
        readOnly: true,
        viewportMargin: Infinity
      },
      codingOptions: {
        mode: 'text/x-java',
        readOnly: true,
        lineNumbers: true,
        viewportMargin: Infinity
      }
    }
  },
  created() {
    const id = this.$route.params.id
    if (typeof id !== 'undefined') {
      console.log(id)
      this.fetchData(id)
    }
  },
  methods: {

    fetchData(id) {
      fetchDetail(id).then(response => {
        this.quData = response.data

        this.quData.answerList.forEach((an) => {
          // 解析数量
          if (an.analysis) {
            this.analysisCount += 1
          }

          // 用户选定的
          if (an.isRight) {
            if (this.quData.type === 1) {
              this.radioValues = an.id
            } else {
              this.multiValues.push(an.id)
            }
          }
        })
      })
    },
    onCancel() {
      this.$router.push({ name: 'ListTran' })
    }

  }
}
</script>

<style>
  .qu-remark{
    margin: 18px;
    font-size: 10px;
    color: #666666;
    background-color: #adadad;
  }
  .qu-coding {
    margin: 18px;
  }
  .CodeMirror {
    border: 1px solid #eee;
    height: auto;
  }
</style>
<style scoped>

  .qu-content{
    padding-bottom: 10px;
  }

  .qu-content div{
    line-height:30px;
  }
  .qu-content .el-input-number div{
    line-height:26px;
  }

  .qu-analysis p{
    color: #555; font-size: 14px
  }
  .qu-analysis-line{
    margin-top: 20px; border-bottom: #eee 1px solid
  }

  .el-checkbox-group label,.el-radio-group label{
    width: 100%;
  }

</style>

